<template>
    <div class="login-container">
        <div class="bg">
            <div class="bg-left"></div>
            <div class="bg-right">
                <div class="image">
                    <el-image :src="url"></el-image>
                    <div class="title">{{ orgName }}</div>
                </div>

                <div class="line"></div>
                <el-form
                    ref="loginForm"
                    :model="loginForm"
                    :rules="loginRules"
                    class="login-form"
                    autocomplete="on"
                    label-position="left"
                >
                    <el-form-item prop="username" label="用户名">
                        <el-input
                            placeholder="请输入您的用户名"
                            ref="username"
                            name="username"
                            type="text"
                            tabindex="1"
                            v-model="loginForm.username"
                            autocomplete="on"
                        >
                            <i slot="prefix" class="el-icon-user-solid"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password" label="密码">
                        <el-input
                            placeholder="请输入您的密码"
                            name="password"
                            ref="password"
                            type="text"
                            tabindex="2"
                            v-model="loginForm.password"
                            @keyup.enter.native="handleLogin"
                            show-password
                        >
                            <i slot="prefix" class="el-icon-lock"></i>
                        </el-input>
                    </el-form-item>

                    <el-button
                        class="btn"
                        :loading="loading"
                        type="primary"
                        @click.native.prevent="handleLogin"
                        >登录</el-button
                    >
                    <span ref="btnlogin" hidden id="btn-login">slider</span>
                </el-form>
                <el-button type="text" class="toPWD" @click="forget">忘记密码</el-button>
            </div>
        </div>
        <div class="footer">
            奥鹏教育 © 2021 All Rights Reserved. 京ICP备05014615号-28 京公网安备11010802031206号
        </div>
    </div>
</template>
<script>
import { captchaValidate } from '@/plugin/captchaValidate/captchaValidate.js';
import { aesEncryption } from '@/utils/token.js';

export default {
    components: {},
    data() {
        return {
            loginForm: {
                username: '',
                password: '',
            },
            loginRules: {
                username: [{ required: true, message: '请输入您的用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入您的密码', trigger: 'blur' }],
            },
            passwordType: 'password',
            url:
                'https://wlyxvpcdn.xiaoben365.com/wlyx/xbyx/2021/wu_1f31tub6kii14kjcpi1lj141r8/logo.png',
            orgName: '教师教育管理服务平台',
            loading: false,
            iscaps: false,
        };
    },
    mounted() {
        captchaValidate('#btn-login', false, this.checkCaptcha);
        this.$refs.username.focus();
    },
    methods: {
        checkCaptcha(extendsParam) {
            if (extendsParam.validate_token) {
                //extendsParam 滑块验证token
                this.dataCommit(extendsParam.validate_token);
            }
        },
        handleLogin(extendsParam) {
            let _this = this;
            if (this.iscaps) {
                this.$refs.loginForm.validate(async (valid) => {
                    if (valid) {
                        // _this.$refs.btnlogin.click();
                        document.getElementById('btn-login').click();
                    }
                });
            } else {
                this.dataCommit('');
            }
        },
        dataCommit(extendsParam) {
            let _this = this;
            this.$refs.loginForm.validate(async (valid) => {
                if (valid) {
                    this.loading = true;
                    let res = await this.axios.login({
                        equipment: 0,
                        username: this.loginForm.username,
                        password: aesEncryption(this.loginForm.password),
                        validateToken: extendsParam,
                    });
                    if (res.success) {
                        const loginData = res.instance;
                        _this.$store.commit('login', loginData);
                        location.reload();
                        this.loading = false;
                    } else {
                        this.loading = false;
                        if (res.instance > 2) {
                            _this.iscaps = true;
                        }
                        this.$notify.error({
                            title: '错误',
                            message: res.errorMsg,
                        });
                    }
                }
            });
        },
        forget() {
            window.location.href = '/forget';
        },
    },
};
</script>

<style lang="scss" scope>
.login-container {
    height: 100%;
    width: 100%;
    padding-top: 150px;
    background-color: #f2f6fa;
    .bg {
        width: 940px;
        background-color: #ffffff;
        border-radius: 16px;
        height: 540px;
        margin: 0 auto;
        .bg-left {
            display: inline-block;
            background: url('../../static/image/login-bg.png') no-repeat;
            background-size: cover;
            width: 470px;
            height: 100%;
        }
        .bg-right {
            width: 470px;
            height: 100%;
            padding: 52px 48px;
            position: relative;
            float: right;
            .image {
                height: 80px;
                .el-image {
                    width: 60px;
                }
                .title {
                    width: 302px;
                    font-size: 20px;
                    font-weight: 600;
                    line-height: 24px;
                    color: #303133;
                    margin-left: 70px;
                    margin-top: -58px;
                }
            }
            .line {
                width: 100%;
                height: 0px;
                border: 1px solid #909399;
                margin-bottom: 48px;
            }

            .btn {
                width: 100%;
                background: #17c289;
                box-shadow: 0px 8px 20px rgba(31, 188, 133, 0.3);
                border: none;
                border-radius: 4px;
                margin-top: 20px;
                &:hover {
                    opacity: 0.8;
                }
            }
            .toPWD {
                margin-top: 10px;
                color: #17c289;
                line-height: 13px;
                float: right;
            }
        }
    }
    .footer {
        padding-top: 40px;
        text-align: center;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 17px;
        color: #909399;
        opacity: 1;
    }
}
</style>
